<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        .capsule {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 87px;
            height: 30px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="capsule"></div>
    <div class="p-4">
        <!-- 订单状态标签 -->
        <div class="flex space-x-4 mb-6 overflow-x-auto pb-2">
            <button class="px-4 py-2 rounded-full bg-blue-500 text-white text-sm whitespace-nowrap">
                全部
            </button>
            <button class="px-4 py-2 rounded-full bg-white text-gray-600 text-sm whitespace-nowrap">
                待取车
            </button>
            <button class="px-4 py-2 rounded-full bg-white text-gray-600 text-sm whitespace-nowrap">
                使用中
            </button>
            <button class="px-4 py-2 rounded-full bg-white text-gray-600 text-sm whitespace-nowrap">
                已完成
            </button>
            <button class="px-4 py-2 rounded-full bg-white text-gray-600 text-sm whitespace-nowrap">
                已取消
            </button>
        </div>

        <!-- 订单列表 -->
        <div class="space-y-4">
            <!-- 订单卡片1 -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <span class="text-sm font-medium">订单号：202405010001</span>
                    </div>
                    <span class="px-3 py-1 rounded-full bg-green-100 text-green-600 text-xs">
                        待取车
                    </span>
                </div>
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d" 
                         class="w-20 h-16 object-cover rounded-lg">
                    <div class="ml-4 flex-1">
                        <h3 class="font-medium">特斯拉 Model 3</h3>
                        <p class="text-sm text-gray-500">2024-05-01 10:00 至 2024-05-03 10:00</p>
                        <div class="flex justify-between items-end mt-2">
                            <div class="text-sm text-gray-500">
                                北京首都机场T3航站楼
                            </div>
                            <div class="text-right">
                                <p class="text-lg font-semibold text-blue-600">¥948</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-2 mt-4">
                    <button class="px-4 py-2 rounded-lg border border-gray-200 text-sm">
                        取消订单
                    </button>
                    <button class="px-4 py-2 rounded-lg bg-blue-500 text-white text-sm">
                        立即支付
                    </button>
                </div>
            </div>

            <!-- 订单卡片2 -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <span class="text-sm font-medium">订单号：202404280001</span>
                    </div>
                    <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-600 text-xs">
                        使用中
                    </span>
                </div>
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1551830820-330a71b99659" 
                         class="w-20 h-16 object-cover rounded-lg">
                    <div class="ml-4 flex-1">
                        <h3 class="font-medium">宝马 3系</h3>
                        <p class="text-sm text-gray-500">2024-04-28 14:00 至 2024-04-30 14:00</p>
                        <div class="flex justify-between items-end mt-2">
                            <div class="text-sm text-gray-500">
                                北京南站
                            </div>
                            <div class="text-right">
                                <p class="text-lg font-semibold text-blue-600">¥1198</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-2 mt-4">
                    <button class="px-4 py-2 rounded-lg border border-gray-200 text-sm">
                        联系客服
                    </button>
                    <button class="px-4 py-2 rounded-lg bg-blue-500 text-white text-sm">
                        延长租期
                    </button>
                </div>
            </div>

            <!-- 订单卡片3 -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <span class="text-sm font-medium">订单号：202404250001</span>
                    </div>
                    <span class="px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs">
                        已完成
                    </span>
                </div>
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2" 
                         class="w-20 h-16 object-cover rounded-lg">
                    <div class="ml-4 flex-1">
                        <h3 class="font-medium">奔驰 E级</h3>
                        <p class="text-sm text-gray-500">2024-04-25 09:00 至 2024-04-27 09:00</p>
                        <div class="flex justify-between items-end mt-2">
                            <div class="text-sm text-gray-500">
                                北京西站
                            </div>
                            <div class="text-right">
                                <p class="text-lg font-semibold text-blue-600">¥1398</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-2 mt-4">
                    <button class="px-4 py-2 rounded-lg bg-blue-500 text-white text-sm">
                        再次租用
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 